// 聊天机器人前端交互逻辑

// 存储工具列表及选择状态
let availableTools = [];
let selectedTools = [];
let frontendTools = {};
let pendingToolExecutions = {};

// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', function() {
    // 加载工具列表
    loadTools();
    
    // 加载前端工具
    loadFrontendTools();
    
    // 按回车发送消息
    document.getElementById('message-input').addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            sendMessage();
        }
    });
    
    // 发送按钮点击事件
    document.getElementById('send-button').addEventListener('click', sendMessage);
    
    // 工具选择面板切换
    const toolsToggleBtn = document.getElementById('tools-toggle');
    if (toolsToggleBtn) {
        toolsToggleBtn.addEventListener('click', function() {
            const toolsPanel = document.getElementById('tools-panel');
            const directToolsPanel = document.getElementById('direct-tools-panel');
            const builderPanel = document.getElementById('tool-builder-panel');
            
            if (toolsPanel) {
                toolsPanel.classList.toggle('hidden');
                // 如果显示工具选择面板，则隐藏其他面板
                if (!toolsPanel.classList.contains('hidden')) {
                    directToolsPanel.classList.add('hidden');
                    builderPanel.classList.add('hidden');
                }
                toolsToggleBtn.textContent = toolsPanel.classList.contains('hidden') 
                    ? '显示工具选择' : '隐藏工具选择';
            }
        });
    }
    
    // 直接调用工具面板切换
    const directToolsToggleBtn = document.getElementById('direct-tools-toggle');
    if (directToolsToggleBtn) {
        directToolsToggleBtn.addEventListener('click', function() {
            const directToolsPanel = document.getElementById('direct-tools-panel');
            const toolsPanel = document.getElementById('tools-panel');
            const builderPanel = document.getElementById('tool-builder-panel');
            
            if (directToolsPanel) {
                directToolsPanel.classList.toggle('hidden');
                // 如果显示直接调用工具面板，则隐藏其他面板
                if (!directToolsPanel.classList.contains('hidden')) {
                    toolsPanel.classList.add('hidden');
                    builderPanel.classList.add('hidden');
                }
                directToolsToggleBtn.textContent = directToolsPanel.classList.contains('hidden') 
                    ? '直接调用工具' : '隐藏工具调用';
            }
        });
    }
    
    // 工具构建面板切换
    const buildToolToggleBtn = document.getElementById('build-tool-toggle');
    if (buildToolToggleBtn) {
        buildToolToggleBtn.addEventListener('click', function() {
            const builderPanel = document.getElementById('tool-builder-panel');
            const toolsPanel = document.getElementById('tools-panel');
            const directToolsPanel = document.getElementById('direct-tools-panel');
            
            if (builderPanel) {
                builderPanel.classList.toggle('hidden');
                // 如果显示工具构建面板，则隐藏其他面板
                if (!builderPanel.classList.contains('hidden')) {
                    toolsPanel.classList.add('hidden');
                    directToolsPanel.classList.add('hidden');
                }
                buildToolToggleBtn.textContent = builderPanel.classList.contains('hidden') 
                    ? '构建自定义工具' : '隐藏工具构建';
            }
        });
    }
    
    // 添加参数按钮
    const addParamBtn = document.getElementById('add-parameter');
    if (addParamBtn) {
        addParamBtn.addEventListener('click', addParameterField);
    }
    
    // 保存工具按钮
    const saveToolBtn = document.getElementById('save-tool');
    if (saveToolBtn) {
        saveToolBtn.addEventListener('click', saveFrontendTool);
    }
});

// 加载可用工具列表
function loadTools() {
    fetch('/tools')
        .then(response => response.json())
        .then(data => {
            availableTools = data.available_tools || [];
            renderToolsList();
            renderDirectToolsPanel();
        })
        .catch(error => {
            console.error('加载工具失败:', error);
        });
}

// 加载前端自定义工具
function loadFrontendTools() {
    fetch('/frontend_tools')
        .then(response => response.json())
        .then(data => {
            // 存储前端工具
            data.frontend_tools.forEach(tool => {
                frontendTools[tool.id] = {
                    name: tool.name,
                    description: tool.description,
                    parameters: tool.parameters,
                    code: tool.code
                };
            });
            
            // 更新工具列表显示
            renderFrontendToolsList();
        })
        .catch(error => {
            console.error('加载前端工具失败:', error);
        });
}

// 渲染工具列表
function renderToolsList() {
    const toolsList = document.getElementById('tools-list');
    if (!toolsList || !availableTools.length) return;
    
    toolsList.innerHTML = '';
    
    availableTools.forEach(tool => {
        const toolItem = document.createElement('div');
        toolItem.className = 'tool-item';
        
        // 为前端工具添加特殊样式
        if (tool.name.startsWith('frontend_')) {
            toolItem.classList.add('frontend-tool');
        }
        
        const checkbox = document.createElement('input');
        checkbox.type = 'checkbox';
        checkbox.id = `tool-${tool.name}`;
        checkbox.value = tool.name;
        checkbox.checked = selectedTools.includes(tool.name);
        
        checkbox.addEventListener('change', function() {
            if (this.checked) {
                selectedTools.push(tool.name);
            } else {
                selectedTools = selectedTools.filter(t => t !== tool.name);
            }
        });
        
        const label = document.createElement('label');
        label.htmlFor = `tool-${tool.name}`;
        label.textContent = `${tool.name}: ${tool.description}`;
        
        toolItem.appendChild(checkbox);
        toolItem.appendChild(label);
        toolsList.appendChild(toolItem);
    });
}

// 渲染前端工具列表
function renderFrontendToolsList() {
    const frontendToolsList = document.getElementById('frontend-tools-list');
    if (!frontendToolsList) return;
    
    // 清除现有内容，保留标题
    const title = frontendToolsList.querySelector('h4');
    frontendToolsList.innerHTML = '';
    if (title) frontendToolsList.appendChild(title);
    
    // 添加工具列表
    Object.entries(frontendTools).forEach(([toolId, tool]) => {
        const toolItem = document.createElement('div');
        toolItem.className = 'tool-item frontend-tool';
        
        const toolName = document.createElement('strong');
        toolName.textContent = tool.name;
        
        const toolDesc = document.createElement('p');
        toolDesc.textContent = tool.description;
        toolDesc.style.margin = '5px 0';
        
        toolItem.appendChild(toolName);
        toolItem.appendChild(toolDesc);
        frontendToolsList.appendChild(toolItem);
    });
    
    // 如果没有工具，显示提示信息
    if (Object.keys(frontendTools).length === 0) {
        const noTools = document.createElement('p');
        noTools.textContent = '暂无自定义工具，请使用上方表单创建';
        noTools.style.fontStyle = 'italic';
        noTools.style.color = '#666';
        frontendToolsList.appendChild(noTools);
    }
}

// 渲染直接调用工具面板
function renderDirectToolsPanel() {
    const directToolsContainer = document.getElementById('direct-tools-container');
    if (!directToolsContainer || !availableTools.length) return;
    
    directToolsContainer.innerHTML = '';
    
    availableTools.forEach(tool => {
        const toolCard = document.createElement('div');
        toolCard.className = 'tool-card';
        
        // 为前端工具添加特殊样式
        if (tool.name.startsWith('frontend_')) {
            toolCard.classList.add('frontend-tool');
        }
        
        // 工具标题
        const toolTitle = document.createElement('h4');
        toolTitle.textContent = tool.name;
        toolCard.appendChild(toolTitle);
        
        // 工具描述
        const toolDesc = document.createElement('p');
        toolDesc.textContent = tool.description;
        toolCard.appendChild(toolDesc);
        
        // 创建参数输入表单
        const form = document.createElement('form');
        form.className = 'tool-form';
        form.addEventListener('submit', function(e) {
            e.preventDefault();
            executeTool(tool.name, form);
        });
        
        // 添加参数输入框
        if (tool.parameters && tool.parameters.properties) {
            Object.keys(tool.parameters.properties).forEach(paramName => {
                const paramInfo = tool.parameters.properties[paramName];
                const inputGroup = document.createElement('div');
                inputGroup.className = 'input-group';
                
                const label = document.createElement('label');
                label.textContent = `${paramName}: ${paramInfo.description || ''}`;
                
                const input = document.createElement('input');
                input.type = 'text';
                input.name = paramName;
                input.placeholder = paramInfo.description || paramName;
                input.required = tool.parameters.required && tool.parameters.required.includes(paramName);
                
                inputGroup.appendChild(label);
                inputGroup.appendChild(input);
                form.appendChild(inputGroup);
            });
        }
        
        // 添加执行按钮
        const execButton = document.createElement('button');
        execButton.type = 'submit';
        execButton.textContent = '执行';
        execButton.className = 'execute-button';
        form.appendChild(execButton);
        
        toolCard.appendChild(form);
        directToolsContainer.appendChild(toolCard);
    });
}

// 添加参数字段
function addParameterField() {
    const parametersList = document.getElementById('parameters-list');
    if (!parametersList) return;
    
    const paramItem = document.createElement('div');
    paramItem.className = 'parameter-item';
    
    // 参数名称输入
    const paramNameInput = document.createElement('input');
    paramNameInput.type = 'text';
    paramNameInput.placeholder = '参数名称';
    paramNameInput.className = 'param-name';
    
    // 参数描述输入
    const paramDescInput = document.createElement('input');
    paramDescInput.type = 'text';
    paramDescInput.placeholder = '参数描述';
    paramDescInput.className = 'param-desc';
    
    // 必填参数复选框
    const requiredCheck = document.createElement('input');
    requiredCheck.type = 'checkbox';
    requiredCheck.className = 'param-required';
    
    const requiredLabel = document.createElement('label');
    requiredLabel.textContent = '必填';
    requiredLabel.style.fontSize = '0.85em';
    
    // 删除按钮
    const removeBtn = document.createElement('button');
    removeBtn.textContent = '删除';
    removeBtn.addEventListener('click', function(e) {
        e.preventDefault();
        parametersList.removeChild(paramItem);
    });
    
    // 添加到参数项
    paramItem.appendChild(paramNameInput);
    paramItem.appendChild(paramDescInput);
    paramItem.appendChild(requiredCheck);
    paramItem.appendChild(requiredLabel);
    paramItem.appendChild(removeBtn);
    
    // 添加到参数列表
    parametersList.appendChild(paramItem);
}

// 保存前端工具
function saveFrontendTool() {
    // 获取工具信息
    const toolName = document.getElementById('tool-name').value.trim();
    const toolDesc = document.getElementById('tool-description').value.trim();
    const toolCode = document.getElementById('tool-code').value.trim();
    
    // 验证基本信息
    if (!toolName || !toolDesc || !toolCode) {
        alert('工具名称、描述和代码不能为空');
        return;
    }
    
    // 收集参数信息
    const parameters = {
        type: 'object',
        properties: {},
        required: []
    };
    
    const paramItems = document.querySelectorAll('.parameter-item');
    let hasValidParams = true;
    
    paramItems.forEach(item => {
        const paramName = item.querySelector('.param-name').value.trim();
        const paramDesc = item.querySelector('.param-desc').value.trim();
        const isRequired = item.querySelector('.param-required').checked;
        
        if (!paramName) {
            hasValidParams = false;
            return;
        }
        
        parameters.properties[paramName] = {
            type: 'string',
            description: paramDesc || paramName
        };
        
        if (isRequired) {
            parameters.required.push(paramName);
        }
    });
    
    if (!hasValidParams && paramItems.length > 0) {
        alert('参数名称不能为空');
        return;
    }
    
    // 准备工具数据
    const toolData = {
        name: toolName,
        description: toolDesc,
        parameters: parameters,
        code: toolCode
    };
    
    // 发送到服务器
    fetch('/register_frontend_tool', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(toolData)
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // 保存工具到本地
            frontendTools[data.tool_id] = toolData;
            
            // 显示成功消息
            alert(`工具 "${toolName}" 创建成功！`);
            
            // 清空表单
            document.getElementById('tool-name').value = '';
            document.getElementById('tool-description').value = '';
            document.getElementById('tool-code').value = '';
            document.getElementById('parameters-list').innerHTML = '';
            
            // 重新加载工具列表
            loadTools();
            renderFrontendToolsList();
        } else {
            alert('创建工具失败: ' + (data.error || '未知错误'));
        }
    })
    .catch(error => {
        console.error('创建工具失败:', error);
        alert('创建工具失败，请检查网络连接');
    });
}

// 执行工具
function executeTool(toolName, form) {
    // 收集表单数据
    const formData = new FormData(form);
    const parameters = {};
    
    for (const [key, value] of formData.entries()) {
        parameters[key] = value;
    }
    
    // 发送请求
    fetch('/execute_tool', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            tool_name: toolName,
            parameters: parameters
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // 检查是否是前端工具
            if (data.is_frontend_tool && data.tool_id) {
                // 执行前端工具
                executeFrontendTool(data.tool_id, data.parameters);
            } else {
                // 显示后端工具结果
                addToolCallMessage(`直接调用工具: ${toolName} - 结果: ${JSON.stringify(data.result, null, 2)}`);
            }
        } else {
            addMessage('系统', `工具执行错误: ${data.error}`);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        addMessage('系统', '发生错误，请重试');
    });
}

// 执行前端工具
function executeFrontendTool(toolId, parameters) {
    if (!frontendTools[toolId]) {
        addMessage('系统', `找不到前端工具: ${toolId}`);
        return;
    }
    
    try {
        // 获取工具代码
        const toolCode = frontendTools[toolId].code;
        
        // 创建执行函数
        const executeCode = `
            ${toolCode}
            
            // 调用工具函数
            return executeToolFunction(${JSON.stringify(parameters)});
        `;
        
        // 执行代码
        const result = new Function(executeCode)();
        
        // 显示结果
        addToolCallMessage(`前端工具执行: ${frontendTools[toolId].name} - 结果: ${JSON.stringify(result, null, 2)}`);
        
        // 如果有待处理的执行，返回结果
        if (pendingToolExecutions[toolId]) {
            const callback = pendingToolExecutions[toolId];
            delete pendingToolExecutions[toolId];
            callback(result);
        }
        
        return result;
    } catch (error) {
        console.error('前端工具执行错误:', error);
        addMessage('系统', `前端工具执行错误: ${error.message}`);
        
        // 如果有待处理的执行，返回错误
        if (pendingToolExecutions[toolId]) {
            const callback = pendingToolExecutions[toolId];
            delete pendingToolExecutions[toolId];
            callback({ error: error.message });
        }
    }
}

// 构建选定的工具配置
function buildSelectedToolsConfig() {
    if (!selectedTools.length) return null;
    
    return availableTools
        .filter(tool => selectedTools.includes(tool.name))
        .map(tool => ({
            type: tool.type,
            function: {
                name: tool.name,
                description: tool.description,
                parameters: tool.parameters
            }
        }));
}

// 发送消息到服务器
function sendMessage() {
    const input = document.getElementById('message-input');
    const message = input.value.trim();
    if (!message) return;
    
    // 显示用户消息
    addMessage('用户', message);
    input.value = '';
    
    // 构建请求数据
    const requestData = {
        message: message
    };
    
    // 如果有选择工具，添加到请求中
    const selectedToolsConfig = buildSelectedToolsConfig();
    if (selectedToolsConfig) {
        requestData.tools = selectedToolsConfig;
    }
    
    // 发送到服务器
    fetch('/chat', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(requestData)
    })
    .then(response => response.json())
    .then(data => {
        // 显示AI响应
        addMessage('机器人', data.response);
        
        // 如果有工具调用，显示工具调用结果
        if (data.has_tool_calls && data.tool_calls) {
            handleToolCalls(data.tool_calls);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        addMessage('系统', '发生错误，请重试');
    });
}

// 处理工具调用
function handleToolCalls(toolCalls) {
    // 遍历所有工具调用
    toolCalls.forEach(toolCall => {
        const functionName = toolCall.function_name;
        
        // 检查是否是前端工具
        if (functionName.startsWith('frontend_')) {
            // 执行前端工具并获取结果
            const result = executeFrontendTool(functionName, toolCall.parameters || {});
            
            // 显示结果
            addToolCallMessage(`AI调用前端工具: ${functionName} - 结果: ${JSON.stringify(result || toolCall.result, null, 2)}`);
        } else {
            // 显示后端工具结果
            addToolCallMessage(`AI调用工具: ${functionName} - 结果: ${JSON.stringify(toolCall.result, null, 2)}`);
        }
    });
}

// 添加普通消息
function addMessage(sender, text) {
    const chatContainer = document.getElementById('chat-container');
    const messageDiv = document.createElement('div');
    messageDiv.innerHTML = `<strong>${sender}:</strong> ${text}`;
    chatContainer.appendChild(messageDiv);
    chatContainer.scrollTop = chatContainer.scrollHeight;
}

// 添加工具调用消息
function addToolCallMessage(text) {
    const chatContainer = document.getElementById('chat-container');
    const messageDiv = document.createElement('div');
    messageDiv.className = 'tool-call';
    messageDiv.innerText = text;
    chatContainer.appendChild(messageDiv);
    chatContainer.scrollTop = chatContainer.scrollHeight;
} 